<template>
    <div class="message-list" ref="el" :class="{ nodata: datas.length == 0 }">
        <li v-for="(item, index) in datas" :key="index" class="message-item" :class="'msg-' + item.role">
            <i class="iconfont icon-user" v-html="item.role == 'user' ? '&#xe679;' : '&#xe68d;'"></i>
            <div class="right-content">
                <MessageItem :content="item.content" :think="item.thinkContent || ''" v-show="item.content || item.thinkContent"/>
                <div v-show="!item.content && !item.thinkContent && item.role == 'system'"><ThinkLoading v-if="index == datas.length-1"/><span v-else>[未能解答]</span></div>
                <a class="stop-btn" v-show="item.role == 'system' && !item.isFinished && index == datas.length-1" @click="doStopGenerate(index)">停止生成</a>
            </div>
        </li>
    </div>
</template>

<script>
import MessageItem from './MessageItem.vue'
import ThinkLoading from './ThinkLoading.vue'
import { ref, onMounted } from 'vue'
import { addMathJax } from '@/lib/util'

export default {
    components: {
        MessageItem, ThinkLoading
    },
    props: {
        datas: {
            type: Array,
            default: () => []
        }
    },
    setup (props, { emit }) {
        const el = ref(null)
        const doStopGenerate = (index) => {
            emit('stop', index)
        }

        const doScrollBottom = () => {
            setTimeout(() => {
                if (el.value) {
                    el.value.scrollTop = el.value.scrollHeight - el.value.clientHeight
                }
            }, 100)
        }

        onMounted(async () => {
            await addMathJax()
        })

        return {
            el,
            doStopGenerate,
            doScrollBottom
        }
    }
}
</script>

<style lang="scss">
    @use './style.scss';
</style>
